<template>
  <div class="hao">
    <div>我是更新后的</div>
    <button @click="update" class="ceshi" data-id="3131" data-title="ceshi">
      点击更新
    </button>
    <button @click="capture">截图</button>
    <button @click="notice">显示通知</button>
    <a-button @click="flashFrame">窗口闪烁</a-button>
    <a-button @click="openpopup">打开子窗口</a-button>
    <a-button @click="closepopup">关闭子窗口</a-button>
    <a-button @click="miniWindow">窗口最小化</a-button>
    <a-button @click="noticeChild">通知子窗口</a-button>
    <a-button @click="toChild">给子窗口发送事件</a-button>
    <div>下载进度{{ count }}</div>
    <update-dialog :progress="count" :visible="updateDialog"></update-dialog>
    <img :src="imgVal" class="imgVal" />
  </div>
</template>

<script>
// import { ipcRenderer } from "electron";
import { onMounted, getCurrentInstance, onUnmounted, ref } from "vue";
import windowUtil from "../../utils/WindowUtil";
import UpdateDialog from "../../components/UpdateDialog.vue";
const { ipcRenderer, remote } = require("electron");
import { initMenu, getParentNode } from "./userContextHook";
export default {
  components: {
    UpdateDialog,
  },
  setup(props, context) {
    const imgVal = ref("");
    const count = ref(1);
    const updateDialog = ref(false);
    const { proxy, ctx } = getCurrentInstance();
    const ele = initMenu(
      [
        {
          label: "重命名",
          click: () => {
            const temp = getParentNode(ele.value, "ceshi");
            console.log(temp.dataset.id);
          },
        },
      ],
      ".hao"
    );
    // const worker = new Worker("http://localhost:25565/worker.js");
    onMounted(() => {
      ipcRenderer.on("download-progress", (event, arg) => {
        let percentage = Number(arg);
        count.value = percentage;
        if (percentage === 100) {
          updateDialog.value = false;
        }
      });
      ipcRenderer.on("download-error", (event, arg) => {
        console.log("下载失败");
      });
    });
    onUnmounted(() => {
      proxy.$ipcApi.remove("download-progress");
      proxy.$ipcApi.remove("download-error");
    });
    const update = () => {
      updateDialog.value = true;
      proxy.$ipcApi
        .send("start-download", {
          downloadUrL: "http://192.168.100.188:20000/youdi.dmg",
        })
        .then((res) => {
          console.log("开始更新");
        });
    };
    function gotStream(stream) {
      console.log(window.URL.createObjectURL(stream));
      // var reader = new FileReader();
      // reader.readAsDataURL(stream);
      // reader.onload = function (e) {
      //   console.log(e.target);
      // };
      // imgVal.value.srcObject = stream;
      // video.srcObject = stream;
    }

    function getUserMediaError(e) {
      console.log("getUserMediaError");
    }
    const capture = async () => {
      count.value++;
      proxy.$ipcApi.send("get_capture", "测试参数").then((res) => {
        imgVal.value = res;
      });
    };
    const popupRef = ref(null);
    const openpopup = () => {
      popupRef.value = windowUtil.createWindow(
        "http://192.168.60.31:3000/#/child"
      );
      //打开子窗口  第一个参数是子窗口的路径  第二个参数是起的别名
    };
    const closepopup = () => {
      // popupRef.value.close();
      popupRef.value.minimize();
    };

    const notice = async () => {
      // proxy.$ipcApi.send("showNotification", "测试参数").then((res) => {});
      const res = await Notification.requestPermission();
      if (res === "granted") {
        setTimeout(() => {
          const myNotification = new window.Notification("Title", {
            body: "Notification from the Renderer process",
          });
          myNotification.onclick = () => {
            console.log("Notification clicked");
          };
        }, 3000);
      } else {
      }
    };
    const miniWindow = () => {
      windowUtil.minWindow();
      // popupRef.value.minimize();
      // windowUtil.minWindow();
    };
    const flashFrame = () => {
      windowUtil.flashFrame(popupRef.value);
    };
    const noticeChild = () => {};
    const toChild = () => {
      // 获取子窗口的id然后直接通信
      remote.BrowserWindow.fromId(popupRef.value.id).webContents.send(
        "toNews",
        "我是父窗口"
      );
    };
    return {
      update,
      updateDialog,
      capture,
      imgVal,
      count,
      notice,
      openpopup,
      closepopup,
      miniWindow,
      flashFrame,
      noticeChild,
      toChild,
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  .ceshi {
    color: red;
  }
}
.hao {
  color: blue;
}
.imgVal {
  width: 400px;
}
</style>
